import './CommonMenu.scss'
import { useState } from 'react'
import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { refreshStore } from '../Config/zustand'
import { DevextremeTemplate } from '../Utils/Devextreme'
import { PageTopOptions, PagePagination, PageLeftMenu } from '../Utils/PageAssembly'
import { getMenuConfig, emitFunction, menuRefresh, getInitData } from '../Utils/TableConfig'

// 行操作 
const ColumnOptions = ({ data, fields }) => [
    {
        title: '报表预览(合并)',
        modalType: 'model',
        width: '90vw',
        page: 'FromExcel',
        data: { url: { get: 'getCostMonthCompanyReportPDF', params: { uuid: data.uuid } } }
    },
    {
        title: '报表预览(非合)',
        modalType: 'model',
        width: '90vw',
        page: 'FromExcel',
        data: { url: { get: 'getCostMonthCompanyReportPDFNo', params: { uuid: data.uuid } } }
    },
    { title: '审核流程', modalType: 'model', width: 800, page: 'GetApprovalDetail', data }
]

// 默认配置
const pageConfig = { url: 'getCostMonthDetails', page: 'CostMonthDetailsA02' }

const CostMonthDetailsA02 = () => {
    const DevEvent = useEventEmitter()
    const { refresh } = refreshStore()
    const [total, setTotal] = useState(0)
    const [Pagina, setPagina] = useState({ pageIndex: 1, pageSize: 10, isContains: '是' })
    const [Config, setConfig] = useState()
    const [dataSource, setDataSource] = useState()
    const [sortData, setSortData] = useState({})
    const [searchData, setSearchData] = useState({})

    const refreshData = async (paging) => getInitData({ url: pageConfig.url, paging, setTotal, setDataSource })
    useUpdateEffect(() => { menuRefresh({ Pagina, setTotal, setDataSource, setPagina, refreshData }) }, [refresh])
    DevEvent.useSubscription(val => emitFunction({ val, Pagina, sortData, searchData, setSortData, setSearchData, setPagina, refreshData }))

    useMount(() => {
        getMenuConfig({ config: pageConfig.page, setPagina, setConfig })
    })

    return (
        <div className='CommonMenu CostMonthDetails'>
            <div className='Left'>
                <PageLeftMenu type='Organization' DevEvent={DevEvent} />
            </div>
            <div className='Right'>
                {Config && dataSource &&
                    <>
                        <div className='Top'>
                            <PageTopOptions Config={Config} DevEvent={DevEvent} searchData={searchData} wang='5d356e60-6bcd-4a6b-b321-ffdbba60b058' />
                        </div>
                        <div className='Table'>
                            <DevextremeTemplate
                                dataSource={dataSource}
                                config={Config}
                                DevEvent={DevEvent}
                                ColumnOptions={ColumnOptions}
                            />
                            <PagePagination total={total} Paging={Pagina} DevEvent={DevEvent} />
                        </div>
                    </>
                }
            </div>
        </div>
    );
}

export default CostMonthDetailsA02;